【React 19】サクッと理解するuseActionState

const [state, formAction, isPending] = useActionState(action, initialState, permalink?);

import { useActionState } from "react";

// ログインフォームの状態を定義する型
type LoginFormStateType = {
  success: boolean;
};

// ログイン処理をシミュレートする非同期関数
const fetchLogin = async (name, password): Promise<LoginFormStateType> => {
  // ここで認証をする(今回は通信時間を3秒として模倣)
  await new Promise((resolve) => setTimeout(resolve, 3000));
  // 実際はここで認証結果を返す
  return { success: true };
};

// ログインフォームのアクション（フォーム送信時に実行される）
const LoginFormAction = async (prevState: LoginFormStateType, formData: FormData): Promise<LoginFormStateType> => {
  //名前とパスワードを取得
  const name = formData.get("name");
  const password = formData.get("password");
  // ログイン処理を実行し、結果を取得
  const response = await fetchLogin(name, password);
  // ログイン結果を返す
  return response;
};

export const LoginForm = () => {
  // useActionStateフックを使用してフォームの状態、アクション、ローディング状態を管理
  const [formState, formAction, isLoading] = useActionState(LoginFormAction, { success: false });
  // 現在のフォーム状態をコンソールに出力（デバッグ用）
  console.log(formState);

  // ログイン結果メッセージを返す関数
  const resultMessage = () => {
    return formState.success ? "成功" : "エラー";
  };

  return (
    <>
      {/* フォーム要素。actionにformActionを指定してフォーム送信時の挙動を制御 */}
      <form action={formAction}>
        <div>
          {/* ユーザー名入力フィールド */}
          <label>Username: </label>
          <input type="text" name="name" />
        </div>
        <div>
          {/* パスワード入力フィールド */}
          <label>Password: </label>
          <input type="password" name="password" />
        </div>
        <button type="submit">submit</button> {/* 送信ボタン */}
      </form>
      {/* ローディング中は"loading..."を表示し、それ以外はログイン結果メッセージを表示 */}
      {isLoading ? <div>loading...</div> : resultMessage()}
    </>
  );
};

type LoginFormStateType = {
  success: boolean;
  errorMessage?: string; //LoginFormAction内で定義
};